import {Button, Descriptions, Drawer, Space} from 'antd';
import {connect} from 'umi';

const contentWidth = 280;
const labelWidth = 140;

const Detail = (props) => {
  const {detail, setDetail} = props.data;

  /* 取消操作 */
  function onCancel() {
    setDetail(undefined);
  }

  // 判断详情为空
  if (!detail) {
    return null;
  }

  let typeName;
  switch (detail.data.type) {
    case 'wechat':
      typeName = '微信';
      break;
    case 'alipay':
      typeName = '支付宝';
      break;
    case 'douyin':
      typeName = '抖音';
      break;
  }

  return (
    <Drawer
      title={detail ? detail.title : ''}
      width={900}
      onClose={onCancel}
      open={detail ? detail.visible : false}
      bodyStyle={{paddingBottom: 80}}
      extra={
        <Space>
          <Button onClick={onCancel}>取消</Button>
        </Space>
      }
    >
      <Descriptions column={2} bordered={true} size={'small'} labelStyle={{textAlign: 'right'}}>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="授权类型">{typeName ? typeName : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="用户昵称">{detail.data.nickname ? detail.data.nickname : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="绑定手机">{detail.data.mobile ? detail.data.mobile : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="绑定用户ID">{detail.data.userId > 0 ? detail.data.userId : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="应用APPID">{detail.data.appId ? detail.data.appId : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="授权UNIONID">{detail.data.unionid ? detail.data.unionid : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="网页OPENID">{detail.data.openid ? detail.data.openid : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="小程序OPENID">{detail.data.mpOpenid ? detail.data.mpOpenid : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="状态">{detail.data.status === 0 ? '停用' : '正常'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="备注信息">{detail.data.remark ? detail.data.remark : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="创建时间">{detail.data.createTime ? detail.data.createTime : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="更新时间">{detail.data.updateTime ? detail.data.updateTime : '暂无'}</Descriptions.Item>
      </Descriptions>
    </Drawer>
  );
};


export default connect(({}) => {
  return {};
})(Detail);

